<template>
  <div class="pages">
    <div v-if="!isWx" class="notice">
      <NoticeBar left-icon="volume-o" :scrollable="false" @click="toDownload()">
        如未下载软件，请点击此处下载
      </NoticeBar>
    </div>
    <div class="info">
      <div class="title">
        <div>助力劳务过程管理</div>
        <div class="title-right">向数字化转型升级</div>
      </div>
    </div>

    <div class="start">
      <wx-open-launch-app v-if="isWxShow&&!iSinvalid" :appid="'wxc46604d2a03f3bb2'" :extinfo="`?userId=${userId}&name=${name}`" @error="handleErrorFn" @launch="handleLaunchFn">
        <div v-is="'script'" type="text/wxtag-template">
          <div v-is="'style'">
            .button {
            font-size: 20px;
            font-weight: bold;
            width:240px;
            height: 40px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 60px;
            background: linear-gradient(135deg, #56b6ff 0%, #56b6ff 87%, #8b9eff 100%);
            }
          </div>
          <div class="button">立即参与</div>
        </div>
      </wx-open-launch-app>
      <div v-else class="button" @click="openclient">立即参与</div>
    </div>
    <!-- 微信打开app失败时注册 -->
    <Popup v-model:show="register" class="register" style="border-radius: 8px;" :close-on-click-overlay="false">
      <div class="popup">
        <div class="popup-info">
          <CellGroup inset>
            <Field v-model="tel" maxlength="11" type="tel" label="手机号" placeholder="请输入手机号" />
            <Field v-model="sms" maxlength="6" label="短信验证码" placeholder="请输入验证码">
              <template #button>
                <vanButton size="small" round type="primary" :disabled="smsTime>0" @click="getSmsCode">{{ smsTime>0?smsTimeText:'发送验证码' }}</vanButton>
              </template>
            </Field>
          </CellGroup>
        </div>
        <div class="norem-popup-hr" />
        <div class="buttons">
          <div class="buttons-button1" @click="close()">取消</div>
          <div class="norem-buttons-hr" />
          <div class="buttons-button2" @click="ok()">提交</div>
        </div>
      </div>
    </popup>

  </div>
</template>
<script lang="ts">
import { defineComponent, ref, getCurrentInstance, computed, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import {
  Dialog,
  NoticeBar,
  CellGroup,
  Field,
  Button as vanButton,
  Popup,
  Toast,
  Image as VanImage,
  Swipe,
  SwipeItem
} from 'vant'
import { useStore } from 'vuex'
import { getCode, bindUser } from '@/api/sharePrizeAPi'
import left from '@/assets/left.gif'
declare var window: any
export default defineComponent({
  components: {
    NoticeBar,
    Popup,
    CellGroup,
    Field,
    vanButton
  },
  setup() {
    const route = useRoute()
    const userId = route.query.userId
    const name = route.query.name
    /* 获取UA标识，并转为小写*/
    const ua: any = navigator.userAgent.toLowerCase() // 获取判断用的对象
    // eslint-disable-next-line eqeqeq
    const isWx: any = ua.match(/MicroMessenger/i) == 'micromessenger'

    const UrlIOs = 'https://apps.apple.com/cn/app/id1507735978'
    const isIOs = navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)

    const UrlAndroid = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.gongyoushijie.ttgy'
    const isAndroid = navigator.userAgent.match(/android/i)

    const href = `diangongbao://?userId=${userId}&name=${name}`

    const iSinvalid = ref<boolean>(false)
    if (!name || !userId) {
      iSinvalid.value = true
    }

    const openclient = () => {
      if (name && userId) {
        if (isIOs) {
          window.location.href = href
        } else if (isAndroid) {
          window.location.href = href
        }
      } else {
        Dialog.alert({
          message: '分享链接失效'
        }).then(() => {})
      }
    }
    const toDownload = () => {
      if (isIOs) {
        window.location.href = UrlIOs
      } else if (isAndroid) {
        window.location.href = UrlAndroid
      }
    }

    /**
     * 获取开放平台的标签
     * --------------------------------------------------------------
     */
    const isWxShow = ref<boolean>(false)
    const { proxy }: any = getCurrentInstance()
    if (isWx) {
      const store = useStore()
      store.dispatch('wechat/config', {
        openTagList: ['wx-open-launch-app']
      })
      proxy.$wx.ready(() => {
        isWxShow.value = true
      })
    }
    const register = ref<boolean>(false)
    const sms = ref<any>('')
    const tel = ref<any>('')
    const handleErrorFn = () => {
      register.value = true
    }
    /** 验证码*/
    const smsTime = ref(0)
    const smsTimeText = computed(() => {
      return zeroPad(smsTime.value)
    })
    const zeroPad = (n) => {
      return String(n < 10 ? '0' + n : n)
    }
    let interval: any = null
    const getSmsCode = () => {
      if (!/^1\d{10}$/.test(tel.value)) {
        Toast('请输入正确的手机号')
        return
      }
      if (smsTime.value > 0) {
        return
      }
      clearInterval(interval)
      getCode({ mobile: tel.value, sms_type: 330377 }).then(() => {
        Toast.clear()
        smsTime.value = 60
        interval = setInterval(() => {
          if (smsTime.value <= 0) {
            clearInterval(interval)
          }
          smsTime.value--
        }, 1000)
      })
    }
    onBeforeUnmount(() => {
      clearInterval(interval)
    })
    const close = () => {
      register.value = false
      sms.value = ''
      tel.value = ''
      smsTime.value = 0
      clearInterval(interval)
      interval = null
    }
    const ok = () => {
      if (!tel.value) {
        Toast({
          message: '请输入手机号'
        })
        return
      }
      if (!sms.value) {
        Toast({
          message: '请输入验证码'
        })
        return
      }
      bindUser({
        mobile: tel.value,
        smscode: sms.value,
        recommenderId: userId,
        recommenderName: name
      }).then((res: any) => {
        Toast.clear()
        register.value = false
        Dialog.confirm({
          title: '提示',
          message: res.message,
          confirmButtonText: '现在下载',
          confirmButtonColor: '56b6ff'
        })
          .then(() => {
            // on confirm
            toDownload()
          })
          .catch(() => {
            // on cancel
          })
      })
    }
    const handleLaunchFn = () => {}
    return {
      openclient,
      toDownload,
      iSinvalid,
      isWxShow,
      handleErrorFn,
      handleLaunchFn,
      userId,
      name,
      isWx,
      register,
      tel,
      sms,
      smsTimeText,
      smsTime,
      getSmsCode,
      close,
      ok,
      left
    }
  }
})
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.popup {
  background: #fff;
  width: 700px;
  display: flex;
  flex-direction: column;
  &-info {
    flex: 1;
    padding: 40px 0px;
  }
}
.norem-popup-hr {
  width: 100%;
  height: 1px;
  background: #f2f2f2;
}
.buttons {
  display: flex;
  height: 100px;
  &-button1 {
    flex: 1;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .norem-buttons-hr {
    width: 1px;
    background: #f2f2f2;
    height: 100px;
  }
  &-button2 {
    flex: 1;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #56b6ff;
  }
}
.pages {
  height: 100vh;
  width: 750px;
  display: flex;
  background: #f3f3f3;
  flex-direction: column;
  align-items: center;
}
.notice {
  width: 750px;
}
.info {
  flex: 1;
  width: 750px;
  padding: 0px 0 0 0;
  display: flex;
  flex-direction: column;
}
.start {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px;
  width: 750px;
  padding-bottom: 20px;
  .button {
    font-size: 40px;
    font-weight: bold;
    width: 500px;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    box-shadow: 0.4px 0.6px 4.5px rgba(0, 0, 0, 0.038), 1px 1.5px 10.8px rgba(0, 0, 0, 0.044),
      1.9px 2.8px 20.4px rgba(0, 0, 0, 0.047), 3.4px 4.9px 36.4px rgba(0, 0, 0, 0.05),
      6.3px 9.2px 68.1px rgba(0, 0, 0, 0.056), 15px 22px 163px rgba(0, 0, 0, 0.07);
    background: linear-gradient(135deg, #56b6ff 0%, #56b6ff 87%, #8b9eff 100%);
  }
}

.title {
  font-size: 50px;
  font-weight: bold;
  color: #136bdb;
  padding: 40px 80px 0 80px;
  &-right {
    text-align: right;
  }
}
.item {
  flex: 1;
  display: flex;
  padding: 0 20px;
}
.swiper {
  flex: 1;
  overflow: hidden;
  .swipers {
    width: 100%;
    height: 100%;
  }
  .swiper-item {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .image {
    width: 100%;
    height: 100%;
  }
}
.hr {
  width: 750px;
  height: 60px;
}
.arrow {
  height: 40px;
  width: 100%;
}
.right {
  transform: rotate(180deg);
}
.text {
  flex: 1;
  display: flex;
  &-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-text {
    font-size: 32px;
    flex: 1;
    color: #136bdb;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.img1 {
  flex: 1;
  background-image: url('@/assets/1.png');
  background-size: 100% 100%;
}
.img1-1 {
  flex: 1;
  background-image: url('@/assets/1-1.png');
  background-size: 100% 100%;
}
.img1-2 {
  flex: 1;
  background-image: url('@/assets/1-2.png');
  background-size: 100% 100%;
}
.img1-3 {
  flex: 1;
  background-image: url('@/assets/1-3.png');
  background-size: 100% 100%;
}
.img2 {
  flex: 1;
  background-image: url('@/assets/2.png');
  background-size: 100% 100%;
}
.img2-1 {
  flex: 1;
  background-image: url('@/assets/2-1.png');
  background-size: 100% 100%;
}
.img3 {
  flex: 1;
  background-image: url('@/assets/3.png');
  background-size: 100% 100%;
}
.img3-1 {
  flex: 1;
  background-image: url('@/assets/3-1.png');
  background-size: 100% 100%;
}
</style>

